<template>
  <div class="app-container index" v-show="!jumpDetails">
    <!-- new -->
    <el-row :gutter="20">
      <el-col :span="7" :offset="0">
        <el-card
          shadow="never"
          class="topBanner"
          :body-style="{ padding: '15px' }"
          style="margin-bottom: 15px"
        >
          <span
            style="
              display: flex;
              align-items: center;
              justify-content: space-around;
            "
          >
            <span v-for="(value, key) in TjCountTopA" :key="key">
              <span
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <!-- style="display: flex;align-items: center;  flex-direction: column; border-right: 1px solid #f2f2f25e; padding-right: 30px;"> -->
                <span>
                  <span
                    class="TjCountTopName"
                    v-if="value[0] === '已超时任务'"
                    @click="toJumpDetails"
                    style="cursor: pointer"
                    >{{ value[0] }}
                    <span class="TjSpecailText">+{{ bzCsCount }}</span>
                  </span>
                  <span class="TjCountTopName" v-else>{{ value[0] }}</span>
                </span>
                <span
                  class="TjCountTopCount"
                  v-if="value[0] === '待排查任务'"
                  style="color: #ffffff"
                  >{{ value[1] }}</span
                >
                <span
                  class="TjCountTopCount"
                  v-else-if="value[0] === '已排查任务'"
                  style="color: #00f8dd"
                  >{{ value[1] }}</span
                >
                <span
                  class="TjCountTopCount"
                  v-else-if="value[0] === '已超时任务'"
                  @click="toJumpDetails"
                  style="cursor: pointer; color: #ff5050"
                  >{{ value[1] }}</span
                >
              </span>
            </span>
          </span>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="0">
        <el-card
          shadow="never"
          class="topBanner"
          :body-style="{ padding: '15px' }"
          style="margin-bottom: 15px"
        >
          <span
            style="
              display: flex;
              align-items: center;
              justify-content: space-around;
            "
          >
            <span v-for="(value, key) in TjCountTopB" :key="key">
              <span
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <span>
                  <span class="TjCountTopName">{{ value[0] }}</span>
                </span>
                <span
                  class="TjCountTopCount"
                  v-if="value[0] === '待审核隐患'"
                  style="color: #ffffff"
                  >{{ value[1] }}</span
                >
                <span
                  class="TjCountTopCount"
                  v-else-if="value[0] === '待整改隐患'"
                  style="color: #ffffff"
                  >{{ value[1] }}</span
                >
                <span
                  class="TjCountTopCount"
                  v-else-if="value[0] === '待复核隐患'"
                  style="color: #ff8c21"
                  >{{ value[1] }}</span
                >
              </span>
            </span>
            <span
              style="display: flex; align-items: center; flex-direction: column"
            >
              <span>
                <span class="TjCountTopName"
                  >{{ TjCountTopC_YYSYH.name }}
                  <span class="TjSpecailTextB">+{{ bzYsCount }}</span>
                </span>
              </span>
              <span class="TjCountTopCount" style="color: #00f8dd">
                {{ TjCountTopC_YYSYH.value }}</span
              >
            </span>
          </span>
        </el-card>
      </el-col>
      <el-col :span="7" :offset="0">
        <el-card
          shadow="never"
          class="topBanner"
          :body-style="{ padding: '15px' }"
          style="margin-bottom: 15px"
        >
          <span
            style="
              display: flex;
              align-items: center;
              justify-content: space-around;
            "
          >
            <span v-for="(value, key) in TjCountTopC" :key="key">
              <span
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <span>
                  <span
                    class="TjCountTopName"
                    v-if="value[0] === '隐患排查预警'"
                    >{{ value[0] }}
                    <span class="TjSpecailText">+{{ bzYhPcCount }}</span>
                  </span>
                  <span
                    class="TjCountTopName"
                    v-else-if="value[0] === '隐患治理预警'"
                    >{{ value[0] }}
                    <span class="TjSpecailText">+{{ bzYhZlCount }}</span>
                  </span>
                </span>
                <span
                  class="TjCountTopCount"
                  v-if="value[0] === '隐患排查预警'"
                  style="color: #ff5050"
                  >{{ value[1] }}</span
                >
                <span
                  class="TjCountTopCount"
                  v-else-if="value[0] === '隐患治理预警'"
                  style="color: #ff5050"
                  >{{ value[1] }}</span
                >
              </span>
            </span>
            <span
              style="display: flex; align-items: center; flex-direction: column"
            >
              <span>
                <span class="TjCountTopName">{{ TjCountTopC_IMEI.name }}</span>
              </span>
              <span class="TjCountTopCount" style="color: #00f8dd">
                {{ TjCountTopC_IMEI.value }}</span
              >
            </span>
          </span>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="7">
        <el-row :gutter="15" style="margin-top: -5px">
          <el-col
            :span="24"
            :offset="0"
            class="jizhi01"
            style="margin-bottom: 5px"
          >
            <span class="jizhiClass jzTextA">机制运行得分</span>
            <span class="jizhiTextClass">{{ jzRunData.fsCount }}</span>
            <span class="jizhiImgClass"
              ><img
                src="@/assets/images/jizhi03.png"
                alt=""
                style="height: 7px; width: 40px"
            /></span>
            <span class="jizhiClass jzTextB">上周得分</span>
          </el-col>
          <el-col :span="24" :offset="0" class="jizhi02">
            <span class="jizhiClass jzTextA">机制运行效果</span>
            <span class="jizhiTextClass">{{ jzRunData.yxCondition }}</span>
            <!-- <span class="jizhiTextClass">优</span> -->
            <span class="jizhiImgClass"
              ><img
                src="@/assets/images/jizhi03.png"
                alt=""
                style="height: 7px; width: 40px"
            /></span>
            <span class="jizhiClass jzTextB">上周运行情况</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10">
        <Card title="排查任务情况" style="margin-bottom: 20px" height="400px">
          <template #subTitle>
            <div style="height: 45px">
              <!-- <el-select v-model="taskSel" value-key="" placeholder="" clearable filterable @change="taskSelChange">
                <el-option v-for="item in taskSelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select> -->
              <el-date-picker
                v-model="tjWeek"
                type="week"
                format="YYYY [第] ww [周] "
                value-format="YYYY-MM-DD-ww"
                @change="taskStatusChange"
                style="line-height: 45px !important"
              />
              <el-button
                @click="taskStatusReset"
                style="line-height: 45px; margin-top: -7px"
                >重置</el-button
              >
            </div>
          </template>
          <template #default>
            <el-row>
              <el-col :span="24" style="height: 300px">
                <dyBarVue ref="taskStatusRef"></dyBarVue>
              </el-col>
            </el-row>
          </template>
        </Card>
      </el-col>
      <el-col :span="7">
        <Card title="排查任务分布" style="margin-bottom: 20px" height="400px">
          <template #subTitle>
            <div style="height: 45px">
              <el-select
                v-model="countCheckTaskByUnitSel"
                value-key=""
                placeholder=""
                clearable
                filterable
                @change="countCheckTaskByUnitChange"
              >
                <el-option
                  v-for="item in countCheckTaskByUnitOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-button
                @click="countCheckTaskByUnitReset"
                style="line-height: 45px; margin-top: -7px"
                >重置</el-button
              >
            </div>
          </template>
          <template #default>
            <el-row>
              <el-col :span="24">
                <Bar3pie ref="taskDistributionRef"></Bar3pie>
              </el-col>
            </el-row>
          </template>
        </Card>
      </el-col>

      <el-col :span="8">
        <Card title="隐患整改情况" style="margin-bottom: 20px" height="400px">
          <!-- <template #subTitle>
            <div style="height: 45px">
              <el-date-picker
                v-model="tjDate"
                type="date"
                value-format="YYYY-MM-DD"
                @change="init"
                style="line-height: 45px !important"
              />
              <el-button @click="resetDate" style="line-height: 45px; margin-top: -7px;"
                >重置</el-button
              >
            </div>
          </template> -->
          <template #default>
            <el-row>
              <el-col :span="24">
                <Bar3pie ref="countHiddenByStateRef"></Bar3pie>
              </el-col>
            </el-row>
          </template>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card title="隐患整改统计" style="margin-bottom: 20px" height="400px">
          <template #subTitle>
            <div style="height: 45px">
              <el-select
                v-model="countHiddenByDeviceSel"
                value-key=""
                placeholder=""
                clearable
                filterable
                style="width: 150px"
                @change="countHiddenByDeviceChange"
              >
                <el-option
                  v-for="item in countHiddenByDeviceOptions"
                  :key="item.id"
                  :label="item.deviceName"
                  :value="item.deviceName"
                >
                </el-option>
              </el-select>
              <el-date-picker
                v-model="countHiddenByDevicePicker"
                type="daterange"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="countHiddenByDeviceChange"
                style="line-height: 45px !important; width: 200px"
              />
              <el-button
                @click="countHiddenByDeviceReset"
                style="line-height: 45px; margin-top: -7px"
                >重置</el-button
              >
            </div>
          </template>
          <template #default>
            <el-row>
              <el-col :span="24" style="">
                <Bar2Vue ref="countHiddenByDeviceRef"></Bar2Vue>
              </el-col>
            </el-row>
          </template>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card title="预警分析统计" style="margin-bottom: 20px" height="400px">
          <template #subTitle>
            <div style="height: 45px">
              <el-date-picker
                v-model="countHiddenByDeviceAlertPicker"
                type="year"
                format="YYYY [年]"
                value-format="YYYY"
                @change="countHiddenByDeviceAlertChange"
                style="line-height: 45px !important"
              />

              <el-button
                @click="countHiddenByDeviceAlertReset"
                style="line-height: 45px; margin-top: -7px"
                >重置</el-button
              >
            </div>
          </template>
          <template #default>
            <el-row>
              <el-col :span="24" style="">
                <Bar2Multi ref="countHiddenByDeviceAlertRef"></Bar2Multi>
              </el-col>
            </el-row>
          </template>
        </Card>
      </el-col>
    </el-row>

    <!-- old -->
  </div>
  <div class="app-container" v-show="jumpDetails">
    <el-button type="plain" size="default" @click="jumpBack">返回</el-button>
    <csrw></csrw>
  </div>
</template>

<script setup>
import Card from "./components/Card.vue";
import BarVue from "./components/Bar.vue";
import Bar2Vue from "./components/Bar2.vue";
import Bar2Multi from "@/views/hdwarning/immediate/bjtbfx/components/Bar2Multi.vue";
import Bar3pie from "@/views/hdwarning/immediate/bjtbfx/components/Bar3pie.vue";
import BfbBar from "./components/BfbBar.vue";
import V2 from "./indexv2.vue";
import { apis as APIS } from "@/api/yhpc/yxjz";
import {
  queryBarData,
  countTaskDayWeekMonth,
  countHiddenDayWeekMonth,
  toCountDeptHiddenPC,
  toCountDeptHiddenZG,
  // new
  countTop,
  getCheckTaskByState, //超时列表 点击 已超时任务 跳转页面
  countCheckTaskWeek,
  countCheckTaskByUnit,
  countHiddenByState,
  countHiddenByDevice,
  countHiddenByDeviceAlert,
} from "@/api/yhpc/tkfx.js";
import SideTree from "@/components/SideTree";
import { deptTreeSelect } from "@/api/system/user";
import csrw from "./csrw.vue";
import dyBarVue from "./components/dyBar.vue";

//// new
const TjCountTopA = ref([]);
const TjCountTopB = ref([]);
const TjCountTopC = ref([]);
const tjDate = ref([]);
const jumpDetails = ref(false);

const taskStatusRef = ref([]);
const tjMonth = ref("");
const nowDate = new Date();
function getYearWeek(nowDate) {
  let date1 = nowDate,
    date2 = new Date(nowDate.getFullYear(), 0, 1),
    d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
  let mm = nowDate.getMonth() + 1;
  let dd = nowDate.getDate();
  if (mm < 10) {
    mm = "0" + mm;
  }
  if (dd < 10) {
    dd = "0" + dd;
  }
  return `${nowDate.getFullYear()}-${mm}-${dd}-${Math.ceil(
    (d + (date2.getDay() + 1 - 1)) / 7
  )}`;
}
const tjWeek = ref(getYearWeek(nowDate));
const countCheckTaskByUnitSel = ref("");
const countCheckTaskByUnitOptions = ref([]);
const taskDistributionRef = ref([]);
const countHiddenByStateRef = ref([]);

const countHiddenByDeviceRef = ref("");
const countHiddenByDeviceSel = ref("");
const countHiddenByDeviceOptions = ref([]);
const countHiddenByDevicePicker = ref([]);

const countHiddenByDeviceAlertRef = ref("");
const countHiddenByDeviceAlertPicker = ref(new Date().getFullYear() + "");

// 机制运行得分 start
const weekOne = ref({});
const getTime = () => {
  // 获取当前日期对象
  var currentDate = new Date();

  // 获取当前日期是所在周的第几天 (0~6，0表示周日)
  var currentDay = currentDate.getDay();

  // 计算上一周的开始日期
  var startOfLastWeek = new Date(currentDate);
  startOfLastWeek.setDate(currentDate.getDate() - currentDay - 6);

  // 计算上一周的结束日期
  var endOfLastWeek = new Date(startOfLastWeek);
  endOfLastWeek.setDate(startOfLastWeek.getDate() + 6);

  // 格式化日期为字符串（YYYY-MM-DD）
  var formattedStartDate = startOfLastWeek.toISOString().split("T")[0];
  var formattedEndDate = endOfLastWeek.toISOString().split("T")[0];
  weekOne.value.startTime = `${formattedStartDate} 00:00:00`;
  weekOne.value.endTime = `${formattedEndDate} 23:59:59`;
  // 打印上一周的开始日期和结束日期
  // console.log("上一周的开始日期：" + formattedStartDate);
  // console.log("上一周的结束日期：" + formattedEndDate);
};
const jzRunData = ref({});
const weekOneFn = () => {
  // console.log(weekOne.value, 'weekOne 2');
  APIS.query({
    pageNum: 1,
    pageSize: 15,
    startTime: weekOne.value.startTime,
    endTime: weekOne.value.endTime,
  }).then((res) => {
    const jzRunDataTemp = res.data.splice(-1, 1);
    jzRunData.value = jzRunDataTemp[0];
  });
};
// 机制运行得分 end

//// old

// new
onMounted(() => {
  init();
});
const init = () => {
  getTime();
  weekOneFn();

  countTopInit();
  taskStatusChange();
  countCheckTaskByUnitChange();
  countHiddenByStateInit();
  countHiddenByDeviceChange();
  countHiddenByDeviceAlertChange();
};
// 0
const bzCsCount = ref(0);
const bzYsCount = ref(0);
const bzYhPcCount = ref(0);
const bzYhZlCount = ref(0);
const TjCountTopC_IMEI = ref({ name: "", value: null });
const TjCountTopC_YYSYH = ref({ name: "", value: null });
const countTopInit = () => {
  countTop().then((res) => {
    Object.entries(res.data).map((item) => {
      if (
        item[0] === "待排查任务" ||
        item[0] === "已排查任务" ||
        item[0] === "已超时任务"
      ) {
        TjCountTopA.value.push(item);
      }
      if (
        item[0] === "待审核隐患" ||
        item[0] === "待整改隐患" ||
        item[0] === "待复核隐患"
      ) {
        TjCountTopB.value.push(item);
      }
      if (item[0] === "已验收隐患") {
        TjCountTopC_YYSYH.value = { name: item[0], value: item[1] };
      }
      if (
        item[0] === "隐患排查预警" ||
        item[0] === "隐患治理预警" ||
        item[0] === "本周IMEI码"
      ) {
        TjCountTopC.value.push(item);
      }
      if (item[0] === "本周IMEI码") {
        TjCountTopC_IMEI.value = { name: item[0], value: item[1] };
      }
      switch (item[0]) {
        case "本周已超时任务":
          bzCsCount.value = item[1];
          break;
        case "本周已验收隐患":
          bzYsCount.value = item[1];
          break;
        case "本周隐患排查预警":
          bzYhPcCount.value = item[1];
          break;
        case "本周隐患治理预警":
          bzYhZlCount.value = item[1];
          break;
      }
    });
    // console.log(TjCountTopA.value, 'TjCountTopA.value')
    // TjCountTopA.value = res.data;
  });
};
const toJumpDetails = () => {
  jumpDetails.value = !jumpDetails.value;
};
const jumpBack = () => {
  jumpDetails.value = !jumpDetails.value;
  // init()
};

// 1

// 2
const taskStatusReset = () => {
  tjWeek.value = "";
  taskStatusChange();
};
const taskStatusChange = () => {
  const wy = tjWeek.value ? tjWeek.value.split("-") : [2023, 1, 1, 1];
  console.log(tjWeek.value);
  countCheckTaskWeek({ year: wy[0], week: wy[3] }).then((res) => {
    const month8 = ["1周", "2周", "3周", "4周", "5周", "6周", "7周", "8周"];
    const xAxisData = ["任务数", "完成率"];
    const seriesDataTemp = [[], []];
    Object.entries(res.data).map((item) => {
      seriesDataTemp[0].push(item[1].task);
      seriesDataTemp[1].push(item[1].rate);
    });
    const seriesData = [
      {
        name: xAxisData[0],
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: seriesDataTemp[0],
      },
      {
        name: xAxisData[1],
        type: "line",
        emphasis: {
          focus: "series",
        },
        data: seriesDataTemp[1],
      },
    ];
    taskStatusRef.value.setData({
      // seriesData: seriesData,
      // legendData: xAxisData,
      xAxis: month8,
      data: {
        bar: [seriesData[0]],
        line: [seriesData[1]],
      },
    });
  });
};

// 3
const countCheckTaskByUnitReset = () => {
  countCheckTaskByUnitSel.value = "";
  countCheckTaskByUnitChange();
};
const countCheckTaskByUnitChange = () => {
  countCheckTaskByUnit({
    unit: countCheckTaskByUnitSel.value,
  }).then((res) => {
    countCheckTaskByUnitOptions.value = res.data.unitList;
    let total = 0;
    const data = [];
    Object.entries(res.data).forEach((item, key) => {
      if (item[0] === "unitList") {
        return;
      }
      data.push({
        value: item[1],
        name: item[0],
      });
    });
    // data.splice(-1, 1)
    taskDistributionRef.value.setData({
      data,
      total,
    });
  });
};
// 4
const countHiddenByStateInit = () => {
  countHiddenByState().then((res) => {
    // countHiddenByStateRef.value = res.data
    // let total = 0;
    const data = Object.entries(res.data).map((item, key) => {
      // total += item[1];
      return {
        value: item[1],
        name: item[0],
      };
    });
    countHiddenByStateRef.value.setData({
      data,
      // total,
    });
  });
};
// 5
const countHiddenByDeviceReset = () => {
  countHiddenByDevicePicker.value = [];
  countHiddenByDeviceSel.value = "";
  countHiddenByDeviceChange();
};
const countHiddenByDeviceChange = () => {
  countHiddenByDevice({
    startTime: countHiddenByDevicePicker.value[0] || null,
    endTime: countHiddenByDevicePicker.value[1] || null,
    device: countHiddenByDeviceSel.value ? countHiddenByDeviceSel.value : null,
  }).then((res) => {
    countHiddenByDeviceOptions.value = res.data.allDeviceName;
    const data = [];

    Object.entries(res.data).map((item, key) => {
      if (item[0] === "allDeviceName") {
        return;
      }
      data.push({
        value: item[1],
        name: item[0],
      });
      // return {
      //   value: item[1],
      //   name: item[0],
      // };
    });
    // data.splice(0, 1);
    countHiddenByDeviceRef.value.setData({
      data: data.map((item) => item.value),
      yAxis: data.map((item) => item.name),
      // total,
    });
  });
};
// 6
const countHiddenByDeviceAlertReset = () => {
  console.log(new Date().getFullYear());
  countHiddenByDeviceAlertPicker.value = new Date().getFullYear() + "";
  countHiddenByDeviceAlertChange();
};
const countHiddenByDeviceAlertChange = () => {
  countHiddenByDeviceAlert({
    year: countHiddenByDeviceAlertPicker.value,
  }).then((res) => {
    const month8 = [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ];
    const xAxisData = ["隐患排查", "隐患治理"];
    const seriesDataTemp = [[], []];
    Object.entries(res.data).map((item) => {
      seriesDataTemp[0].push(item[1].yhpc);
      seriesDataTemp[1].push(item[1].yhzl);
    });
    let arrData = [];
    Object.keys(res.data).forEach((key) => {
      arrData.push({
        key,
        yhpc: res.data[key].yhpc,
        yhzl: res.data[key].yhzl,
      });
    });
    arrData = arrData.sort((a, b) => a.key - b.key);
    const seriesData = [
      {
        name: xAxisData[0],
        type: "line",
        emphasis: {
          focus: "series",
        },
        data: arrData.map((item) => item.yhpc),
      },
      {
        name: xAxisData[1],
        type: "line",
        emphasis: {
          focus: "series",
        },
        data: arrData.map((item) => item.yhzl),
      },
    ];
    console.log(seriesData, xAxisData);
    countHiddenByDeviceAlertRef.value.setData({
      seriesData: seriesData,
      legendData: xAxisData,
      xAxisData: arrData.map((item) => Number(item.key) + "月"),
    });
    // const data = Object.entries(res.data).map((item, key) => {
    //   return {
    //     value: item[1],
    //     name: item[0],
    //   };
    // });
    // countHiddenByDeviceAlertRef.value.setData({
    //   data: data.map((item) => item.value),
    //   yAxis: data.map((item) => item.name),
    //   type: "line",
    // });
  });
};

//// old
</script>

<style lang="scss" scoped>
.index {
  // padding: 20px;
  width: 100%;
  // min-height: calc(100vh);
  background-color: #e6ecf1;
}
.mt20 {
  margin-top: 20px;
}

.bannerCol {
  display: flex;
  justify-content: space-around;
  align-items: center;
  line-height: 50px;
}
.bannerColSpan {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.topBanner ::v-deep .el-card__body {
  background: #007dd6; //007dd6
  color: #fff;
  border-radius: 5px;
  padding: 20px 15px !important;
}
.TjCountTopName {
  line-height: 28px;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
}
.TjCountTopCount {
  color: #ff5050;
  font-size: 25px;
  font-weight: 700;
  text-shadow: 0.3px 0.3px 3px #b9b9b9;
}
.jizhi01 {
  // line-height: 200px;
  height: 200px;
  // width: 100%;
  background-image: url(@/assets/images/jizhi01.png);
  background-size: 100% 205px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.jizhiClass {
  line-height: 40px;
  width: 100%;
  padding-left: 50px;
}
.jizhiTextClass {
  line-height: 50px;
  width: 100%;
  padding-left: 50px;
  font-size: 36px;
  font-weight: 700;
  color: #00af95;
}
.jizhiImgClass {
  line-height: 0px;
  width: 100%;
  // height: 10px;
  padding-left: 50px;
  font-weight: 700;
  color: #00af95;
}
.jzTextA {
  font-size: 20px;
  font-weight: 600;
  color: #555;
  letter-spacing: 3px;
}
.jzTextB {
  font-size: 14px;
  font-weight: 600;
  color: #979797;
  margin-top: 18px;
  letter-spacing: 2px;
}
.jizhi02 {
  height: 200px;
  background-image: url(@/assets/images/jizhi02.png);
  background-size: 100% 205px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
//
.TjSpecailText {
  font-weight: 500;
  border: 1px solid;
  padding: 1px 2px;
  color: #ff5050;
  text-shadow: 0.3px 0.3px 3px #b9b9b9;
  font-size: 10px;
}
.TjSpecailTextB {
  font-weight: 500;
  border: 1px solid;
  padding: 1px 2px;
  color: #00f8dd;
  text-shadow: 0.3px 0.3px 3px #b9b9b9;
  font-size: 10px;
}
</style>
